<template>
  <div class="home">
    <custom title="我的会员卡" />
    <div class="vipImg vipImgOneBg">
      <div class="flex justify-sb">
        <div class="flex">
          <img src="@/assets/myMemberList/oneShop.png" alt="" class="shopImg" />
          <div class="vipTit">会员商户名称</div>
        </div>
      </div>
      <div class="cardNum">卡号：123456789</div>
    </div>
    <div class="vipImg vipImgTwoBg">
      <div class="flex justify-sb">
        <div class="flex">
          <img src="@/assets/myMemberList/twoShop.png" alt="" class="shopImg" />
          <div class="vipTit">会员商户名称</div>
        </div>
      </div>
      <div class="cardNum">卡号：123456789</div>
    </div>
    <div class="vipImg vipImgThreeBg">
      <div class="flex justify-sb">
        <div class="flex">
          <img src="@/assets/myMemberList/threeShop.png" alt="" class="shopImg" />
          <div class="vipTit">会员商户名称</div>
        </div>
      </div>
      <div class="cardNum">卡号：123456789</div>
    </div>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
export default {
  components: {
    custom
  },
  data() {
    return {
      isCheck: false,
      priceList: [
        {
          title: '充值',
          titleValue: '100元',
          isTag: false,
          isSelect: false
        }, {
          title: '充200',
          titleValue: '送30元',
          isTag: true,
          isSelect: true
        }
      ],
      priceIndex: '',
      custom: {
        isSelect: false,
        isKeyboard: false,
        value: ''
      }
    }
  },
  created() {
  },
  methods: {
    onSelePrice(num) {
      this.priceList.forEach((item, index) => {
        item.isSelect = index === num
      })
      if (num === 'custom') { // 自定义金额
        this.custom.isSelect = true
        this.custom.isFous = true
        this.custom.isKeyboard = true
      } else {
        this.custom.isSelect = false
        this.custom.isFous = false
        this.custom.isKeyboard = false
      }
      this.priceIndex = num
    },
    onGetPay(val) {
      this.custom.value = val
    },
    onRest() {
      this.custom.isKeyboard = false
    }
  }
}
</script>

<style scoped>
.vipImg{
  width: 660px;
  height: 300px;
  margin: 0 auto;
  color: #fff;
  margin-top: 20px;
}
.vipImgOneBg{
  background: url('../../assets/myMemberList/oneCard.png') no-repeat;
  background-size: 100% 100%;
  color: #704B0D;
}
.vipImgTwoBg{
  background: url('../../assets/myMemberList/twoCard.png') no-repeat;
  background-size: 100% 100%;
}
.vipImgThreeBg{
  background: url('../../assets/myMemberList/threeCard.png') no-repeat;
  background-size: 100% 100%;
}
.shopImg{
  width: 84px;
  height: 84px;
  display: block;
  margin: 46px 20px 0 48px;
}
.vipTit{
  font-size: 30px;
  font-weight: 500;
  margin-top: 75px;
}
.cardNum{
  margin-top: 110px;
  line-height: 1rem;
  margin-left: 48px;
  font-size: 24px;
}

</style>
